<template>
  <div class="app-container">
    <div class="handle-content">
      <el-input v-if="this.$store.getters.role.store_id == 0" v-model="storeId" placeholder="请输入店铺id" style="width: 200px;margin-right: 10px;">
        <el-button slot="append" @click="search">查询</el-button>
      </el-input>
      <el-upload
        class="upload-demo"
        ref="upload"
        :action="url"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :before-remove="beforeRemove"
        multiple
        :limit="1"
        :on-exceed="handleExceed"
        :file-list="fileList"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传xls与xlsx文件，且不超过10M</div>
      </el-upload>
    </div>

    <el-table v-loading="listLoading" :data="statistics" element-loading-text="拼命加载中" border fit highlight-current-row>
      <el-table-column label="商品统计" align="center">
        <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">
            {{  scope.row.title }}
          </template>
        </el-table-column>
        <el-table-column label="商品数量" align="center">
          <template slot-scope="scope">
            {{  scope.row.num }}
          </template>
        </el-table-column>
      </el-table-column>

    </el-table>

    <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
      <el-table-column v-if="this.$store.getters.role.store_id == 0" label="店铺ID" align="center">
        <template slot-scope="scope">
          {{ scope.row.store_id }}
        </template>
      </el-table-column>
      <el-table-column v-if="this.$store.getters.role.store_id == 0" label="店铺名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.store_title }}
        </template>
      </el-table-column>
      <el-table-column label="订单ID" align="center">
        <template slot-scope="scope">
          {{ scope.row.order_id }}
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.order_status == 0">超时取消</span>
          <span v-else-if="scope.row.order_status == 1">已取消</span>
          <span v-else-if="scope.row.order_status == 2">待付款</span>
          <span v-else-if="scope.row.order_status == 3">待发货</span>
          <span v-else-if="scope.row.order_status == 4">待收货</span>
          <span v-else-if="scope.row.order_status == 5">已收货</span>
          <span v-else-if="scope.row.order_status == 6">退款中</span>
          <span v-else-if="scope.row.order_status == 7">已退款</span>
        </template>
      </el-table-column>
      <el-table-column label="商品名" align="center">
        <template slot-scope="scope">
          {{ scope.row.good_title }}({{scope.row.good_describe}})
        </template>
      </el-table-column>
      <el-table-column label="商品数目" align="center">
        <template slot-scope="scope">
          {{ scope.row.goods_quantity }}
        </template>
      </el-table-column>
      <el-table-column label="支付时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.pay_at }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { reviewOrderList, reviewOrder } from '@/api/order'
import { getToken } from '@/utils/auth' // get token from cookie

export default {

  data() {
    return {
      showOrderInfo: false,
      list: [],
      statistics: [],
      listLoading: false,
      listQuery: {
        page: 1,
        storeId: 0,
        pageSize: 10
      },
      storeId:'',
      total: 0,
      url:'',
      fileList: []
    }
  },
  mounted() {
    this.getList()
  },

  methods: {
    getList() {
      this.listLoading = true
      reviewOrderList(this.listQuery).then(response => {
        this.list = response.data.data
        this.statistics = response.data.statistics
        this.url = response.data.path + '?token=' + getToken()
        this.listLoading = false
      })
    },
    search() {
      this.listQuery.storeId = this.storeId
      this.getList()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      console.log(files)
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handleSuccess(response, file, fileList){
      console.log('response:'+response)
      console.log('file:'+file)
      console.log('fileList:'+fileList)
      this.$message.success('操作成功')
      this.getList()
    },
    submitUpload() {
      if(this.fileList != []){
        this.$refs.upload.submit();
      }else{
        this.$message.warning('请选择上传文件')
      }
    },
  }

}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-container{
    .handle-content{
        margin: 1.5rem;
        .right{
            float: right;
            margin-bottom: 20px;
        }
    }
}
</style>
